<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js"></script>
		<style>
			ul{
				width: 400px;
				height: auto;
				background-color: #c9c9c9;
			}
			li{
				width: 100%;
				height: auto;
				background-color: grey;
			}
			div{
				display:none;
				width: 400px;
				height: 200px;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<ul class="parentWrap">
			<li class="menuGroup">
				<span class="groupTitle">标题1</span>
				<div>我是弹出来的div</div>
			</li>
			<li class="menuGroup">
				<span class="groupTitle">标题2</span>
				<div>我是弹出来的div</div>
			</li>
			<li class="menuGroup">
				<span class="groupTitle">标题3</span>
				<div>我是弹出来的div</div>
			</li>
			<li class="menuGroup">
				<span class="groupTitle">标题4</span>
				<div>我是弹出来的div</div>
			</li>
			<li class="menuGroup">
				<span class="groupTitle">标题5</span>
				<div>我是弹出来的div</div>
			</li>
		</ul>
		<script>
//			console.log($(".parentWrap>.menuGroup"));
			$(".parentWrap>.menuGroup").click(function(){
//				console.log($(this).children("div").show());
				//思路：找到当前对象，再找其孩子div,将其全部显示出来
				//再找div的父母的兄弟li,将其孩子全部隐藏
				$(this).children("div").show().parent().siblings("li").children("div").hide();
			})
		</script>
	</body>
</html>
